<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<meta name="keywords" content="关键字"/>
<meta name="description" content="描述"/>
<script type="text/javascript" src="clipboard1.js"></script>
<script type="text/javascript" src="clipboard.js"></script>
</head>
<body>

<span class=" b aasd">as大三大四的1</span>
<span class="a c">as大三大四的2</span>
<span class="b a">as大三大四的3</span>
<span class="b">as大三大四的</span>
<span>as大三大四的</span>
<span>as大三大四的</span>
<embed name="clipboardswf" devicefont="false" width="200" height="40" src="clipboard.swf" menu="false" allowscriptaccess="sameDomain" swliveconnect="true" wmode="transparent" style="margin-top:-20px" type="application/x-shockwave-flash">

<div style="float:left; width:100%; height:100px; background:#666;">
	<div style="margin-left:300px; margin-right:100px;">123123</div>
</div>
<div style="float:left; width:300px; height:100px; background:#aaa; margin-left:-100%"></div>
<div style="float:left; width:100px; height:100px; background:#333; margin-left:-100px"></div>
<style type="text/css">
.test_box {
    display: -moz-box; 
    display: -webkit-box; 
    display: box; 
    
     
    margin: 40px auto; 
    padding: 20px; 
    background: #f0f3f9;
 }
.list {
    padding: 0 1em; 
    font: bold 36px/200px monaco; 
    text-shadow: 1px 1px #eee;
}
.list_one {
    -moz-box-flex: 1; 
    -webkit-box-flex: 1; 
    box-flex: 1;
}
.list_two{
    -moz-box-flex: 2; 
    -webkit-box-flex: 2; 
    box-flex: 2;
}
</style>
<div class="test_box">
    <div class="list list_two" style="background:#555">112333333333333</div>
    <div class="list list_one" style="background:#666; max-width:50%; overflow:hidden;">21133333333333333333333333333333333333333333333333333333333333333333</div>
    <div class="list list_one" style="background:#777">3</div>
</div>

<div class="base">
    <div class="angle"></div><!-- end angle -->
</div><!-- end base -->
<style type="text/css">
.base{
	border:64px solid;
	border-color:#67B2E4 transparent rgba(105,185,238,.50) transparent;
	height:0;
	margin:20% auto;
	position:relative;
	width:0;
}

.base:after,
.base:before,
.angle,
.angle:after,
.angle:before,
.shade{
	height:0;
	position:absolute;
	width:0;
}
.base:after,
.base:before,
.angle:after,
.angle:before{
	content:"";
	z-index:-1;
}

.base:after{
	border-bottom:64px solid #3498DB;
	border-left:64px solid transparent;
	border-right:64px solid transparent;
	left:-128px;
	bottom:0;
	width:128px;
}

.base:before{
	border:128px solid;
	border-color:#A3D1EF transparent transparent;
	left:-128px;
}

.angle{
	border:64px solid;
	border-color:transparent transparent rgba(255,255,255,.40);
	left:-64px;
	top:-128px;
	z-index:0;
}
.angle:after{
	border:128px solid;
	border-color:rgba(54,156,224,.50) transparent transparent;
	left:-128px;
	top:64px;
	-webkit-transform:scaleX(.5);
}
.angle:before{
	background-color:#000;
	border-radius:50%;
	-webkit-filter:blur(12px);
	height:12px;
	left:-32px;
	top:192px;
	-webkit-transform:scaleY(.5);
	width:64px;
	z-index:-1;
}
</style>

<script>
//$C("a")
//console.log( $C("a") );
console.log( document.getElementsByTagName("embed")[0].onclick );
var magic = (function(){
  var $ = function(e){
    for(var i=0; i<(e.length||1); i++)
      [].push.call(this, e[i]||e);
    return this;
  }
  $.prototype.each = function(fn){
    for(var i=0; i<this.length; i++)
      fn.call(this[i], i , this[i]);
    return this;
  }
  return function(){ return new $( arguments[0] ); }
})();

magic( document.querySelectorAll("div") ).each(function(i){
  console.log(this);
  console.log(i);
});
</script>
</body>
</html>











